<template>
  <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    财务数据
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>补币流水</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-select v-model="select_country" placeholder="筛选国家" clearable  class="handle-select mr10" align="center" size= "small">
                <el-option label="美国" value="0"></el-option>
                <el-option v-for="(type_item,index) in countryCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select>

            <el-date-picker class="handle-date" v-model="select_date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="交易开始日期" end-placeholder="交易结束日期" :picker-options="orderDatePicker">
            </el-date-picker>

            <el-button type="primary" icon="el-icon-search" class="handle-btn" @click="getData" align="center" size= "small">搜索</el-button>

        </div>

        <el-table :data="cashLogCenter" border style="width: 100%" ref="multipleTable" sum-text="总金额" show-summary>
  
            <el-table-column  prop="machineNo" label="机器编号" align="center"> 
            </el-table-column>

            <el-table-column  prop="machineName" label="机器名称" align="center"> 
            </el-table-column>

            <el-table-column  prop="addAmount" label="补钞总金额" align="center"> 
            </el-table-column>

            <el-table-column  prop="outAmount" label="取钞总金额" align="center"> 
            </el-table-column>

        </el-table>

        
  </div>
</template>
<script>
export default {
    data(){
        return {
            select_date:'',
            orderDatePicker: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            select_country:'',
            countryCenter:[],
            cashLogCenter:[
                    {"machineNo":"123","machineName":"1号机器","addAmount":"200","outAmount":"100"},
                    {"machineNo":"123","machineName":"1号机器","addAmount":"200","outAmount":"100"},
                    {"machineNo":"123","machineName":"1号机器","addAmount":"200","outAmount":"100"}
                ]
        }
    },
    methods:{
        getData(){

        }
    }
}
</script>
<style scoped>
.handle-select{
    width: 200px;
    margin: 0 5px 10px 0;
}
.handle-date{
    width:400px;
    height: 30px;
    display:inline-block;
    vertical-align:top;
    margin:0 5px 20px 0;
}
.handle-btn{

    vertical-align:top;
}
</style>
